<script setup lang="ts">
import {ref, onMounted} from 'vue'
//通用分页数据
import {PageData} from "@/ts/CommonTypes";
//Api工具类
import * as apiUtil from "@/api/ApiUtils"
//权限工具类
import * as authUtil from "@/ts/AuthUtils";
//Api接口和类定义
import {apiDeleteById, apiGetList, apiExportList,
SysChineseColorVO, SysChineseColorQuery} from "@/api/SysChineseColorApi"
//表单
import Form from "./form.vue"
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  RedoOutlined,
  FormOutlined,
  DeleteOutlined,
  ClusterOutlined,
} from "@ant-design/icons-vue"
import {notifySuccess} from "@/api/ApiUtils";


const dataName = ref<string>("中国色");


/**
 * 查询对象
 */
const query = ref<SysChineseColorQuery>(new SysChineseColorQuery());

/**
 * 分页数据
 */
const pageData = ref<PageData<SysChineseColorVO>>(new PageData<SysChineseColorVO>());

const activeKey = ref("Color");

function handleClick(value) {
  try {
    console.log("开始复制到剪切板", value);
    navigator.clipboard.writeText(value);
    apiUtil.notifySuccess("复制成功",value);
  } catch (err) {
    console.error('复制失败', value, err);
  }
}

/**
 * 页面加载后执行的钩子函数
 */
onMounted(() => {
  handleQueryList()
})

/**
 * 查询列表
 */
const handleQueryList = async () => {
  query.value.size = 500;
  try {
    const res = await apiGetList(query.value)
    if (apiUtil.isSuccessed(res)) {
      pageData.value = res.data;
    }
  } catch (error) {
    apiUtil.notifyError('查询失败', error.message);
  }
}


</script>

<template>
  <div class="margin-10 padding-20">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="Color" tab="Color"></a-tab-pane>
      <a-tab-pane key="BackGroundColor" tab="BackGroundColor"></a-tab-pane>
    </a-tabs>

    <a-row :gutter="8">
      <a-col class="text-center margin-top-10" :span="3" v-for="item in pageData.records">
        <a-tooltip>
          <template #title>{{ item.colorName }} {{ item.colorValue }}</template>
          <div  v-if="activeKey==='Color'" class="my-color"
                :style="'color: '+item.colorValue+';border: 1px '+item.colorValue+' solid'"
                @click="handleClick(item.colorValue)">
            {{ item.colorName }}
            <div>{{item.colorValue}}</div>
          </div>
          <div v-else class="my-color" :style="'color:white;background-color: '+item.colorValue"
               @click="handleClick(item.colorValue)">
            {{ item.colorName }}
            <div>{{item.colorValue}}</div>
          </div>

        </a-tooltip>

      </a-col>
    </a-row>
  </div>

</template>

<style scoped>
.my-color {
  border-radius: 4px;
  font-size: 16px;
  padding:5px;
  cursor: pointer;
}

.my-color:hover {
  font-weight: bolder;
  box-shadow: -3px -3px 10px #54a29e, 3px 3px 10px #a79d66;
}
</style>
